<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>人员列表</h1>
    <button @click="updateMEi">更新马冬梅</button>
    <ul>
        <li v-for="(p,index) in persons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>

</div>
<script src="../JavaScript/vue.js"></script>
<script>
    /*
数组更新检测:
    变更方法
  Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: 'Baz' })。

    替换数组:
     变更方法，顾名思义，会变更调用了这些方法的原始数组。
     相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。
     它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

    example1.items = example1.items.filter(function (item) {
        return item.message.match(/Foo/)
    })
    你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。
    Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作
* */
    const vm = new Vue({
        el: "#app",
        data: {
            persons: [
                {id: "001", name: "马冬梅", age: 1, sex: "女"},
                {id: "002", name: "周冬梅", age: 19, sex: "女"},
                {id: "003", name: "周杰伦", age: 20, sex: "男"},
                {id: "004", name: "文昭伦", age: 5, sex: "男"},
            ],
        },
        methods: {
            updateMEi() {
                // this.persons[0].name="马老师" 能更新
                //this.persons[0] = {id: "001", name: "马老师", age: 1, sex: "女"} 更新不了
                //Vue.set(this.persons,0,{id: "001", name: "马老师", age: 1, sex: "女"}) 能更新
                // this.persons.splice(0,1,{id: "001", name: "马老师", age: 1, sex: "女"}) 能更新
            }
        }
    })
</script>
</body>
</html>
